<!-- fileName: ReCommendSong -->
<template>
  <div>
    <entry-title>推荐歌单</entry-title>
    <div class="recommend-grid">
      <div class="recommend-grid-cell">
        <div style="display: flex; flex-direction: column;">
          <div>
            <div @click="goPlayList('every')" class="songBox">
              <div class="songCommend">
                <span style="padding: 5px 10px;">根据您的音乐口味生成每日更新</span>
              </div>
              <div style="position: absolute;">
                <div class="dateBox">
                  <img :src="sunShire" class="xyBg"/>
                </div>
              </div>
              <div
                style="position: absolute; display: inline-block; left: 50%; top: 50%; transform: translate(-50%, -50%)">
                <div class="dateBg">
                  <img :src="dateSrc" class="date"/>
                  <span class="dateSpan">{{ new Date().getDate() }}</span>
                </div>
              </div>
              <div class="cPlay">
                <img :src="startRedSrc"
                     style="width: calc(100% - 10px);
                                 height: calc(100% - 10px);
                                 padding: 4px 4px 4px 7px;"/>
              </div>
            </div>
          </div>
          <div style="margin-top: 10px;">
            <span style="font-size: 15px">每日歌曲推荐</span>
          </div>
        </div>
      </div>
      <div :key="item.id" class="recommend-grid-cell" v-for="item in songList">
        <div style="display: flex; flex-direction: column; position: relative;">
          <div @click="goPlayList(item.id)" class="musicBox">
            <div>
              <div style="position: relative;">
                <img :src="getViewImgUrl(item.picUrl + '?param=170y170')"
                     style="border-radius: 5px; width: 100%; height: 100%; filter: brightness(1.1) saturate(1.5) contrast(.7)"/>
                <div class="cPlay">
                  <img :src="startRedSrc"
                       style="width: calc(100% - 10px);
                                 height: calc(100% - 10px);
                                 padding: 4px 4px 4px 7px;"/>
                </div>
              </div>

              <div class="playCountBg">
                <div class="playCountSpan">
                  <span style="font-size: 12px; color: #fff; vertical-align: top;">
                    {{ unitToThousand(item.playCount) }}
                  </span>
                </div>
                <img :src="playCountIcon" class="playCountIcon" lazy/>
              </div>
              <div style="word-break:break-all;">
                <span style="font-size: 14px;">{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { discoverApi } from '@/api/discover'
  import redPlayIcon from '@/assets/img/discover/playIconRed.png'
  import sunShire from '../../../assets/img/discover/xy.jpg'
  import dateSrc from '../../../assets/img/discover/date.png'
  import startRedSrc from '../../../assets/img/discover/start_red.png'
  import playCountIcon from '../../../assets/img/discover/playCount.png'

  export default {
    data() {
      return {
        redPlayIcon,
        sunShire,
        dateSrc,
        startRedSrc,
        playCountIcon,
        songList: []
      }
    },
    computed: {},
    created() {
      this.getSongList()
    },
    methods: {
      goPlayList(type) {
        this.$router.push('/playlist/' + type)
      },
      async getSongList() {
        discoverApi().getSongList({
          limit: 9
        }).then(res => {
          this.songList = res.result
        })
      }
    }

  }
</script>

<style lang="less" scoped>

  .recommend-grid {
    display: grid;
    grid-template-columns: repeat(5, 20%);
  }

  .recommend-grid-cell {
    margin-top: 10px;
  }

  .playCountBg {
    position: absolute;
    float: right;
    z-index: 5;
    top: 3px;
    width: 14vw;
  }

  .playCountSpan {
    display: inline-block;
    float: right;
    padding-right: 5px;
  }

  .playCountIcon {
    display: inline-block;
    float: right;
    width: 15px;
    height: 15px;
  }

  .musicBox {
    width: 14vw;
    cursor: pointer;
  }

  .dateBox {
    width: 14vw;
    height: 14vw;
    overflow: hidden;
    border-radius: 5px;
  }

  .dateBg {
    width: 70px;
    height: 70px;
    position: relative;
  }

  .xyBg {
    width: 14vw;
    height: 14vw;
    border-radius: 5px;
    filter: blur(17px);
    display: inline-block;
    vertical-align: middle;
  }

  .date {
    width: 70px;
    height: 70px;
    position: absolute;
  }

  .dateSpan {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    left: 52%;
    top: 60%;
    transform: translate(-50%, -50%);
  }

  .songBox {
    position: relative;
    width: 14vw;
    height: 14vw;
    cursor: pointer;
    overflow: hidden;
    filter: brightness(1.05) saturate(1.5) contrast(.8);
  }

  .songCommend {
    background-color: rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .8);
    height: 0;
    width: 14vw;
    top: -35px;
    line-height: 17px;
    position: absolute;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    z-index: 5;
    opacity: 0;
    padding: 2px 0;
    transition: height 300ms ease-in-out;
  }

  .songBox:hover .songCommend {
    transition: height 300ms ease-in-out;
    transform: translateY(35px);
    opacity: 1;
    overflow: hidden;
    height: 40px;
  }

  .songCommend span {
    font-size: 12px;
    color: #fff;
    display: inline-block;
    word-break: break-word;
  }

  .cPlay {
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50px;
    opacity: 0;
    position: absolute;
    bottom: 12px;
    right: 12px;
    transition: opacity 300ms ease-in-out;
  }

  .songBox:hover .cPlay {
    transition: opacity 300ms ease-in-out;
    opacity: .9;
  }

  .musicBox:hover .cPlay {
    transition: opacity 300ms ease-in-out;
    opacity: .9;
  }
</style>
